<template>
    <div class="invest-body">

        <FullHeadImg backImage="marketplace/invest_head_bg.png">
            <template #default>
                <h1>The Future of Private Investing</h1>
            </template>
        </FullHeadImg>

        <section class="flex-row invest-feature body-m">
            <div class="flex-row feature-desc">
                <p>
                    We offers exclusive access to private investment opportunities with high-growth potential across
                    real estate, manufacturing, technology, healthcare, and infrastructure sectors. By connecting
                    investors and entrepreneurs, we ensure transparency, eliminating information gaps so all parties
                    are
                    aligned.
                </p>
                <img :src="getImage('marketplace/invest_c1.png')" alt="">
            </div>
            <div class="flex-row feature-list">
                <div class="feature-item gradient-card"
                    v-for="(item, idx) in marketPlaceConfig.investmentOpportunities.features" :key="idx">
                    <img :src="getImage(item.image)" alt="">
                    <h4>{{ item.title }}</h4>
                    <div>{{ item.desc }}</div>
                </div>
            </div>
        </section>

        <section class="potential-body body-m">
            <h2 style="padding-bottom: 2rem;">
                Be a part of the high potential real-world projects
            </h2>
            <p>
                Honeybee unlock private markets for investors from traditional and digital assets.
            </p>
        </section>

        <section class="invest-search-bar body-m">
            <h2>Investment opportunities</h2>
            <p>Browse current investment opportunities. All companies are vetted & pass due diligence.</p>

            <div class="flex-row search-bar">
                <el-input class="search-input" v-model="state.searchKey"
                    :style="{ width: isSmallScreen ? '100%' : '50%', height: '3rem', fontSize: '1.1rem' }"
                    placeholder="Start typing to search" clearable>
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
                <div v-if="!isSmallScreen"></div>
                <div class="search-filter">
                    <el-dropdown v-for="(filterItem, idx) in filterOptions">
                        <div>
                            <span>{{ filterItem.title }}</span>
                            <el-icon>
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(option, idx) in filterItem.options" :key="idx">{{ option
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </section>

        <section class="invest-products body-m">
            <div class="product-item" v-for="(item, idx) in products" :key="idx"
                :style="{ backgroundImage: `url(${getImage(item.image)})` }" @click="pushDetail(idx)">
                <div class="product-desc-bg">
                    <div class="product-item-title">{{ item.title }}</div>
                    <div class="product-bottom">
                        <div class="product-left">
                            <div v-if="item.capitalization > 0"><b>{{ item.capitalization }}</b> capitalization</div>
                            <div v-if="item.raised > 0"><b>{{ item.raised }}</b> raised</div>
                            <div v-if="item.investors > 0"><b>{{ item.investors }}</b> investors</div>
                            <div v-if="item.minimum > 0"><b>{{ item.minimum }}</b> minimum</div>
                        </div>
                        <div class="product-right">
                            <button>Real estate</button>
                            <button>Debt</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section></section>
    </div>
</template>

<script setup lang="ts" name="InvestmentView">
import products from '@/utils/investProductsConfig';
import marketPlaceConfig from '@/utils/marketPlaceConfig';
import { reactive } from 'vue';

import { useScreenSize } from '@/utils/useScreenSize';
import { useRouter } from 'vue-router';
const { isSmallScreen } = useScreenSize()
const router = useRouter()

const state = reactive({
    searchKey: '',
})

const secotrOptions = [
    'Real Estate',
    'Technology',
    'Crypto Fund',
    'Crypto Mining',
]

const typeOptions = [
    'Equity',
    'Debt'
]

const sortOptions = [
    'Trending',
    'Most recent',
    'Amount raised',
    'Closing soon',
    'Company name A-Z',
]

const filterOptions = [
    {
        title: 'Sector',
        options: secotrOptions,
        changeTitle: false
    },
    {
        title: 'Type',
        options: typeOptions,
        changeTitle: false
    },
    {
        title: 'Sort by：',
        options: sortOptions,
        changeTitle: true
    }
]

function pushDetail(idx: number) {
    if (idx === 0) {
        let name = 'province'
        router.push({ name })
    }

}

</script>

<style scoped lang="scss">

.invest-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.feature-desc {

    align-items: center;

    img {
        width: 45%;
    }

    p {
        line-height: 2rem;
    }
}

.invest-feature {
    flex-direction: column;
    align-items: center;

    .feature-list {
        gap: 1rem;

        .feature-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;

            text-align: left;

            img {
                width: 50px;
            }
        }
    }
}

.potential-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.invest-search-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;

    .search-bar {
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .search-filter {
        display: flex;
        gap: 2rem;

        .el-dropdown:hover {
            border: none;
        }
    }
}

.invest-products {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem 0;

    .product-item {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 380px;
        border-radius: 5px;
        overflow: hidden;
        color: white;
        background-color: lightgrey;
        transition: all 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .product-desc-bg {
            padding: 5px 15px;
            width: 100%;
            color: black;
            background-color: #F3D52399;
            transition: all 0.3s ease-in-out;
            transform: translateY(calc(100% - 70px));
            line-height: 1.5;

            .product-item-title {
                font-weight: bold;
                font-size: 1.1rem;
                min-height: 70px;
            }

            .product-bottom {
                display: flex;
                font-size: 0.8rem;
                justify-content: space-between;

                .product-left {
                    display: flex;
                    flex-direction: column;
                }

                .product-right {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;

                    button {
                        height: 30px;
                        width: 90px;
                        background-color: transparent;
                        border: 1px solid black;
                        border-radius: 2px;
                        color: black;
                    }
                }
            }
        }
    }

    .product-item:hover {
        cursor: pointer;
        background-color: #00000055;
        transform: scale(1.005);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

        .product-desc-bg {
            transform: none;
        }
    }
}

@media (max-width: 650px) {
    .invest-body {
        gap: 2rem;
    }

    .feature-desc img {
        width: 90%;
    }

    .invest-feature .feature-list {
        width: 100%;
    }

    .invest-products {
        grid-template-columns: repeat(1, 1fr);
    }
}
</style>